<template>
  <div>
    <el-descriptions border :column="num" :title="title">
      <el-descriptions-item label="报价单号" :content-class-name="handleColor('bjdh')">{{form.bjdh}}</el-descriptions-item>
      <el-descriptions-item label="完工单号" :content-class-name="handleColor('wgdh')">{{form.wgdh}}</el-descriptions-item>
      <el-descriptions-item label="合同金额" :content-class-name="handleColor('htje')">{{form.htje}}</el-descriptions-item>
      <el-descriptions-item label="报价日期" :content-class-name="handleColor('bjrq')">{{form.bjrq}}</el-descriptions-item>
      <el-descriptions-item label="客户名称" :content-class-name="handleColor('khname')">{{form.khname}}</el-descriptions-item>
      <el-descriptions-item label="客户地址" :content-class-name="handleColor('khdz')">{{form.khdz}}</el-descriptions-item>
      <el-descriptions-item label="客户税号" :content-class-name="handleColor('khsh')">{{form.khsh}}</el-descriptions-item>
      <el-descriptions-item label="报价单附件">
        <span @click="downFile(0)" style="cursor: pointer">{{bjdFj !== null ? bjdFj.fjname : ""}} <i class="el-icon-download"></i> </span>
      </el-descriptions-item>
      <el-descriptions-item label="完工单附件">
        <span @click="downFile(1)" style="cursor: pointer">{{wgdFj !== null ? wgdFj.fjname : ""}} <i class="el-icon-download"></i> </span>
      </el-descriptions-item>
      <el-descriptions-item label="检测方式" :content-class-name="handleColor('jcfs')">
        <el-tag type="warning" v-if="form.jcfs === '2'">送检</el-tag>
        <el-tag v-else>下场</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="下场/送检日期" :content-class-name="handleColor('xcrq')">{{form.xcrq}}</el-descriptions-item>
      <el-descriptions-item label="下场状态" :content-class-name="handleColor('xczt')">
        <span>{{xcList.filter(item => item.dictValue === form.xczt)[0] !== undefined ? xcList.filter(item => item.dictValue === form.xczt)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="下场负责人" :content-class-name="handleColor('xcfzrname')">{{form.xcfzrname}}</el-descriptions-item>
      <el-descriptions-item label="下场人员" :content-class-name="handleColor('xcryname')">{{form.xcryname}}</el-descriptions-item>
      <el-descriptions-item label="完工日期" :content-class-name="handleColor('wgrq')">{{form.wgrq}}</el-descriptions-item>
      <el-descriptions-item label="证书份数" :content-class-name="handleColor('zjfs')">{{form.zjfs}}</el-descriptions-item>
      <el-descriptions-item label="到账账号" :content-class-name="handleColor('dzzh')">{{form.dzzh}}</el-descriptions-item>
      <el-descriptions-item label="外包情况" :content-class-name="handleColor('wbqk')">
        <span>{{sfList.filter(item => item.dictValue === form.wbqk)[0] !== undefined ? sfList.filter(item => item.dictValue === form.wbqk)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="是否已开发票" :content-class-name="handleColor('sfkp')">
        <span>{{sfList.filter(item => item.dictValue === form.sfkp)[0] !== undefined ? sfList.filter(item => item.dictValue === form.sfkp)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="开票金额(元)" :content-class-name="handleColor('kpje')">{{form.kpje}}</el-descriptions-item>
      <el-descriptions-item label="发票号" :content-class-name="handleColor('fph')">{{form.fph}}</el-descriptions-item>
      <el-descriptions-item label="开票日期" :content-class-name="handleColor('kprq')">{{form.kprq}}</el-descriptions-item>
      <el-descriptions-item label="是否回款" :content-class-name="handleColor('sfhk')">
        <span>{{hkList.filter(item => item.dictValue === form.sfhk)[0] !== undefined ? hkList.filter(item => item.dictValue === form.sfhk)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="回款金额" :content-class-name="handleColor('hkje')">{{form.hkje}}</el-descriptions-item>
      <el-descriptions-item label="回款日期" :content-class-name="handleColor('hkrq')">{{form.hkrq}}</el-descriptions-item>
      <el-descriptions-item label="备注" :content-class-name="handleColor('bz')">{{form.bz}}</el-descriptions-item>
      <el-descriptions-item label="申请电子档" :content-class-name="handleColor('sfsqdzd')">
        <span>{{sfList.filter(item => item.dictValue === form.sfsqdzd)[0] !== undefined ? sfList.filter(item => item.dictValue === form.sfsqdzd)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="电子档是否给客户" :content-class-name="handleColor('sfgkhdzd')">
        <span>{{sfList.filter(item => item.dictValue === form.sfgkhdzd)[0] !== undefined ? sfList.filter(item => item.dictValue === form.sfgkhdzd)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="纸质打印" :content-class-name="handleColor('zzdy')">
        <span>{{sfList.filter(item => item.dictValue === form.zzdy)[0] !== undefined ? sfList.filter(item => item.dictValue === form.zzdy)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="已邮寄客户" :content-class-name="handleColor('yyjkh')">
        <span>{{sfList.filter(item => item.dictValue === form.yyjkh)[0] !== undefined ? sfList.filter(item => item.dictValue === form.yyjkh)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="下场通知用户" :content-class-name="handleColor('xctzyh')">
        <span>{{sfList.filter(item => item.dictValue === form.xctzyh)[0] !== undefined ? sfList.filter(item => item.dictValue === form.xctzyh)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="特殊处理" :content-class-name="handleColor('tscl')">
        <span>{{sfList.filter(item => item.dictValue === form.tscl)[0] !== undefined ? sfList.filter(item => item.dictValue === form.tscl)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="所属公司" :content-class-name="handleColor('ssgs')">
        <span>{{ssgsList.filter(item => item.dictValue === form.ssgs)[0] !== undefined ? ssgsList.filter(item => item.dictValue === form.ssgs)[0].dictLabel : ""}}</span>
      </el-descriptions-item>
      <el-descriptions-item label="原始单">
        <span @click="downFile(3)" style="cursor: pointer">{{ysdFj !== null ? ysdFj.fjname : ""}} <i class="el-icon-download"></i> </span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getFj, getFjById } from '@/api/gd/fj'
export default {
  name: 'info',
  props: {
    form: {
      type: Object
    },
    title: {
      type: String
    },
    num: {
      type: Number
    },
    differentKeys: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      bjdFj: {},
      wgdFj: {},
      ysdFj: {},
      xcList: [],
      sfList: [],
      hkList: [],
      tsclList: [],
      ssgsList: [],
    }
  },
  created() {
    this.init()
    this.getDictObj()
  },
  methods: {
    handleColor(item) {
      if (this.differentKeys.includes(item)) {
        return "my-content-red"
      }else {
        return "my-content-white"
      }
    },
    init() {
      // 通过报价单id，查询一下报价单数据
      if (this.form.bjdfj !== null && this.form.bjdfj !== "" && this.form.bjdfj !== undefined) {
        getFj(this.form.bjdfj, 'blob').then(res => {
          this.bjdFj = res.data
        })
      }
      if (this.form.wgdfj !== null && this.form.wgdfj !== "" && this.form.wgdfj !== undefined) {
        getFj(this.form.wgdfj, 'blob').then(res => {
          this.wgdFj = res.data
        })
      }
      if (this.form.ysfj !== null && this.form.ysfj !== "" && this.form.ysfj !== undefined) {
        getFj(this.form.ysfj, 'blob').then(res => {
          this.ysdFj = res.data
        })
      }
    },
    getDictObj() {
      // 是否已下场
      this.getDicts("gd_xczt_xbb").then(res => {
        this.xcList = res.data
      })
      this.getDicts("gd_sf").then(res => {
        this.sfList = res.data
      })
      // 是否回款
      this.getDicts("gd_sfhk").then(res => {
        this.hkList = res.data
      })
      // 特殊处理
      this.getDicts("gd_tscl").then(res => {
        this.tsclList = res.data
      })
      // 所属公司
      this.getDicts("gd_ssgs").then(res => {
        this.ssgsList = res.data
      })
    },
    downFile(type) {
      let id = null;
      let fileName = null;
      if (type === 0) {  // 报价单
        id = this.form.bjdfj
        fileName = this.bjdFj.fjname
      }else if (type === 1) {  // 完工单
        id = this.form.wgdfj
        fileName = this.wgdFj.fjname
      }else if (type === 2) {  // 原始单
        id = this.form.ysfj
        fileName = this.ysdFj.fjname
      }
      if (id !== null && id !== undefined && id !== "") {
        getFjById(id, 'blob').then(response => {
          const binaryData = [];
          binaryData.push(response);
          let url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/octet-stream' }));
          const link = document.createElement('a');
          link.href = url
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
      }
    }
  }
}
</script>

<style>
.my-content-red {
  background: #FDE2E2;
}
.my-content-white {
  background: white;
}
</style>
